<template>
    <div class="TeacherPersonalCenter_from_box_css">
        <!-- <el-form
            :label-position="labelPosition"
            label-width="100px"
            :model="formLabelAlign"
            style="max-width: 460px;margin-left: 15vw;"
        >
            <el-form-item label="账号电话">
            <el-input v-model="formLabelAlign.name" />
            </el-form-item>
            <el-form-item label="账号密码">
            <el-input type="password" v-model="formLabelAlign.region" />
            </el-form-item>
            <el-form-item label="确认密码">
            <el-input type="password" v-model="formLabelAlign.type" />
            </el-form-item>
            <el-button type="primary" style="width: 28vw;height: 5vh;margin-left: 2vw;" @click="UpdateAdmin">更新信息</el-button>
        </el-form> -->
        <div id="TeacherPersonalCenter_from_content_box_css">
            <el-form :label-position="labelPosition" label-width="80px" :model="TeacherPersonalCenterformLabelAlign" style="margin: 5vh auto;width: 100%;height: 90%;">
              <el-form-item label="用户账号">
                <el-input v-model="TeacherPersonalCenterformLabelAlign.username"></el-input>
              </el-form-item>
              <el-form-item label="用户密码">
                <el-input v-model="TeacherPersonalCenterformLabelAlign.password" show-password></el-input>
              </el-form-item>
              <el-form-item label="上传头像">
                <el-upload
                class="avatar-uploader"
                :action="sculptureUrl"
                :on-success="teacherUpdate"
                >
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
              <el-form-item>
                <el-button size="small"  type="primary" style="width: 5vw;height: auto;" @click="UpdateTeacherPersonalCenter(PersonalCenterformLabelAlign)">确定修改</el-button>
              </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
    export default {
        name:'TeacherPersonalCenter',
        data(){
            return{
                sculptureUrl:'http://127.0.0.1/file/uploadTeacherAvatar',
                TeacherPersonalCenterformLabelAlign:{
                    username: '',
                    password: '',
                    email: '',
                    phone:'',
                    iamge:''
                }
            }
        },
        mounted(){
            if(this.$store.state.teachername==='未知'){
                alert("检查到非常操作，退出本次操作！")
                this.$router.push("/")
            }else{
                this.sculptureUrl=this.sculptureUrl+"?username="+this.$store.state.teachername
                console.log(this.sculptureUrl)
            }
        },
        methods:{
            teacherUpdate(){
                alert("头像更改成功")
            },
            onFileChange(event) {
                this.file = event.target.files[0]
                console.log(event)
            },
            uploadFile() {
                var that=this
                let formData = new FormData()
                console.log(this.file)
                formData.append('file', this.file)
                axios.post(that.sculptureUrl, {params:{
                    avatar:formData
                }})
                    .then(response => {
                    console.log(response.data)
                    })
                    .catch(error => {
                    console.log(error)
                    })
            },
            UpdateTeacherPersonalCenter(){
                var that=this
                axios.get('http://127.0.0.1/UpdateBackgroundteacher',{
                    params:{
                        user:that.TeacherPersonalCenterformLabelAlign.username,
                        password:that.TeacherPersonalCenterformLabelAlign.password,
                    }
                })
                .then(function(res){
                    console.log(res.data)
                    if(res.data==1){
                    alert("修改成功")
                    that.$router.go(0)
                    }else{
                    alert("修改失败")
                    }
                }).catch(function(error){
                    console.log(error)
                    alert("系统出错")
                })
            }
        }
    }
</script>

<style>
    .TeacherPersonalCenter_from_box_css{
        position: relative;
        width: 98%;
        height: 100%;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.1);
    }
    #TeacherPersonalCenter_from_content_box_css{
        position: absolute;
        top: 1%;
        left: 30%;
        width: 25%;
        height: 80%;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>